<!-- 品牌管理 -->
<template>
  <div class="management-tree">
    <div class="tree-form">
      <div class="tree-box">
        <el-tree
          :data="data"
          :props="defaultProps"
          node-key="primartKey"
        >
          <span class="custom-tree-node" slot-scope="{ data }">
            <span>{{ data.categoryNameDesc }}</span>
            <span>
              <el-button type="text" size="mini" @click.stop="() => remove(data)">删除</el-button>
              <el-button v-if="data.level==2" type="text" size="mini" @click.stop="() => append(data)">添加</el-button>
              <el-button v-if="data.level!=2" type="text" size="mini" @click.stop="() => update(data)">编辑</el-button>
            </span>
          </span>
        </el-tree>
      </div>
      <div class="form-box" v-if="showChild">
        <div class="form-box-item">
          <el-form :model="typeForm" ref="childForm" label-width="100px" size="small" label-position="right">
              <el-col :span="24">
                <el-form-item label="品牌名称" prop="catalogName" :rules="{required: true, message: '品牌名称不能为空', trigger: 'blur'}">
                  <el-input  v-model="typeForm.catalogName"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="品牌编码" prop="catalogCode" :rules="{required: true, message: '品牌编码不能为空', trigger: 'blur'}">
                  <el-input  v-model="typeForm.catalogCode" disabled> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="品牌别名" prop="aliasName">
                  <el-input  v-model="typeForm.aliasName"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="品牌说明" prop="description">
                  <el-input  v-model="typeForm.description"> </el-input>
                </el-form-item>
              </el-col>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="cancel">取 消</el-button>
            <el-button size="mini" type="primary" @click="save('childForm')">保存</el-button>
          </span>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="showTypes" title="添加类型" width="50%" append-to-body :before-close="cancel" :close-on-click-modal="false">
      <el-form :model="typeForm" ref="form" label-width="100px" size="small" label-position="right">
        <el-row :gutter="50">
          <el-col :span="12">
            <el-form-item label="类型名称" prop="catalogName" :rules="{required: true, message: '类型名称不能为空', trigger: 'blur'}">
              <el-input  v-model="typeForm.catalogName"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型编码" prop="catalogCode">
              <el-input  v-model="typeForm.catalogCode" disabled> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取消</el-button>
        <el-button size="mini" type="primary" @click="save('form')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { askDialog } from '@/pages/limit/assets/util';
  import {categoryCreate,categoryDelete,categoryDetail,categoryTree,categoryUpdate} from '../../api/masterDataManagement'
  export default {
    data() {
      return {
        defaultProps:{
          children: 'child',
          label: 'categoryNameDesc'
        },
        data:[],
        showTypes:false,
        showChild:false,
        typeForm:{
          catalogName:'',
          catalogCode:'',
          description:'',
          parentId:'',
          primaryKey:'',
          aliasName:''
        },
      };
    },

    created() {
      this.getTree()
    },

    methods: {
      async getTree(){
        let res = await categoryTree({
          bizId:'commercial_rent_main_data',
          bizType:'commercial_rent_main_data',
          catalogTypeList:['business_type','industry','brand','brand_child'],
          status:1
        })
        this.data =res.rows&&res.rows.length>0? res.rows[0].child:[]
      },
      randomString (num) {  
        num = num || 18;
        var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
        a = t.length,
        n = "";
        for (let i = 0; i < num; i++) {
          n += t.charAt(Math.floor(Math.random() * a));
        }
        this.typeForm.catalogCode = n
      },
      async addFn () {
        Object.keys(this.typeForm).forEach(key => {this.typeForm[key]=null,setTimeout(() => {
          this.$refs.form.clearValidate(key)
        }, 0);});
        this.showTypes = true
        this.randomString()
      },
      save(formName){
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let params = Object.assign({
              bizId:'commercial_rent_main_data',
              bizType:'commercial_rent_main_data',
              catalogType:this.showTypes?'brand':'brand_child',
             },this.typeForm)
            let res =this.typeForm.primaryKey?await categoryUpdate(params): await categoryCreate(params)
            this.getTree()
            this.$message.success('添加成功！')
            this.cancel()
          }
        });
      },
      async remove(data){
        askDialog('确认删除？', async () => {
          if(data.primaryKey){
            let res = await categoryDelete({
              primaryKey:data.primaryKey
            })
            this.getTree()
            this.$message.success('删除成功！')
          }
        });
        this.cancel()
      },
      append(data){
        this.showChild = true
        Object.keys(this.typeForm).forEach(key => {this.typeForm[key]=null,setTimeout(() => {
          this.$refs.childForm.clearValidate(key)
        }, 0);});
        this.typeForm.parentId = data.primaryKey
        this.randomString()
      },

      async update(data){
        if(data.level>2){
          this.showChild = true
          Object.keys(this.typeForm).forEach(key => {this.typeForm[key]=null,setTimeout(() => {
            this.$refs.childForm.clearValidate(key)
          }, 0);});
          let res = await categoryDetail({
            primaryKey:data.primaryKey
          })
          this.typeForm = Object.assign(this.typeForm,res)
        }
      },
      cancel(){
        this.showTypes = false
        this.showChild = false
        Object.keys(this.typeForm).forEach(key => this.typeForm[key]=null);
      }
    },
  };
</script>
<style lang="scss" scoped>
  .management-tree{
    width: 100%;
    padding:20px;
    .tree-form{
      display: flex;
      justify-content: flex-start;
      .tree-box{
        width:40%;
        .el-tree {
          position: relative;
          cursor: default;
          background: #FFF;
          color: #606266;
          width: 100%!important;
        }
      }
      .form-box{
        width: 60%;
        display: flex;
        justify-content: center;
        .form-box-item{
          width: 70%;
          display: flex;
          justify-content: flex-start;
          flex-direction: column;
          .dialog-footer{
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
</style>